<template>
  <div id="header_navbar">
    <div class="container">
      <!-- logo -->
      <div class="logo">
        <img :src="webInfo.logo" alt="170 * 100尺寸以内的logo">
      </div>
      <!-- navbar -->
      <div class="navbar">
          <el-menu :default-active="activeIndex" router active-text-color="#409EFF" 
            mode="horizontal" @select="handleSelect">
            <el-menu-item :index="item.route" v-for="(item, index) in menu" :key="index">{{ item.name }}</el-menu-item>

          </el-menu>
      </div>
      <!-- login or  register -->
      <div class="login">
        <div class="userinfo" v-if="token && username ">
          <el-link type="primary" @click="showInfo">{{ username }}</el-link> , <el-link type="danger" @click="logout">退出</el-link>
        </div>
        <div class="link" v-else>
          <el-link type="primary" :underline="false" @click="$router.push('/login')" >登录</el-link> <el-link >/</el-link> <el-link type="success" :underline="false" @click="$router.push('/register')">注册</el-link>
        </div>
        <div class="tel">
          <el-link type="danger" style="font-size:18px">{{ webInfo.servicetel }}</el-link>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      activeIndex: "1",
      menu: [
        { name: "首页", route: "/" },
        { name: "题库", route: "/userinfo" },
        { name: "免费课", route: "/userinfo" },
        { name: "直播", route: "/userinfo" },
        { name: "图书", route: "/userinfo" },
        { name: "简章", route: "/" },
        { name: "购课", route: "/buyke" },

        { name: "学习中心", route: "/userinfo" },
      ],
      webInfo: {},
    };
  },
  computed: {
    token() {
      return localStorage.token || this.$store.state.UserInfo.token;
    },
    username() {
      return this.$store.state.UserInfo.username;
    },
  },
  created () {
    this.getWebInfo();
  },
  mounted() {
    this.getUser()

  },
  methods: {
    handleSelect(e) {
      console.log(e);
    },
    logout() {
      this.$store.commit("getUserInfo", {})
      localStorage.removeItem("token")
    },
    // getUserinfo
    async getUser() {
      if(this.token) {
        let res = await this.$axios.post("/port/user/username", { token: this.token })
        // console.log(res);
        this.$store.commit("getUserInfo", res.data.data)
      }
    },
    // 网页信息
     async getWebInfo() {
        let res = await this.$axios.post("/port/index/website", { key: this.$key })
        // console.log(res);
        if (res.data.code == 200) {
            this.webInfo = res.data.data[0]
        }
        let keywords = document.querySelector("meta[name=keywords]")
        let desc = document.querySelector("meta[name=description]")
        let title = document.querySelector("title")
        // console.log(keywords);
        keywords.content = this.webInfo.keyword
        desc.content = this.webInfo.describe
        title.innerText = this.webInfo.title
     },
    //  个人中心也
    showInfo() {
      this.$router.push("/userinfo")
    }
  }
};
</script>

<style lang="scss" scoped>
#header_navbar {
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #f2f2f2;
  box-sizing: border-box;
  background-color: #fff;
  .container {
    width: 1200px;
    height: 100px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    overflow: hidden;
    .logo {
      width: 200px;
      img {
        width: 170px;
        height: 70px;
      }
    }
    .login {
      text-align: center;
      width: 150px;
    }
    .navbar {
      flex: 1;
    }
  }
}
.el-menu.el-menu--horizontal {
  border-bottom: none !important;
}
</style> 